<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="黑名单"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="topwords">
      <div>用户</div>
      <div>违规事项</div>
    </div>
    <div class="mainwords">
      <div class="detail">
        <div>陈**</div>
        <div>136****8561</div>
        <div>虚假房源</div>
      </div>
      <div class="detail">
        <div>李*</div>
        <div>187****1298</div>
        <div>额外收费</div>
      </div>
      <div class="detail">
        <div>王**</div>
        <div>159****6523</div>
        <div>伪造证件</div>
      </div>
      <div class="detail">
        <div>刘*</div>
        <div>183****8160</div>
        <div>虚假房源</div>
      </div>
      <div class="detail">
        <div>陈**</div>
        <div>180****9246</div>
        <div>额外收费</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.topwords {
  font-size: 16px;
  line-height: 50px;
  height: 50px;
  background-color: #f6f6f6;
  display: flex;
  justify-content: space-around;
}
.mainwords {
  font-size: 14px;
  line-height: 50px;
  height: 50px;
  .detail {
    display: flex;
    justify-content: space-around;
    > div {
      text-align: center;
      width: 80px;
    }
    &:nth-child(2n) {
      background-color: #f6f6f6;
    }
  }
}
</style>